import React from 'react'
import PropTypes from 'prop-types'
import { Button, Modal, Table } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import moment from 'moment'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const confirm = Modal.confirm

const ProcessTypeList = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)
  const deleteComfim = (id, e) => {
    confirm({
      title: '确认删除?',
      onOk () {
        onDeleteItem(id)
      },
    })
  }
  const columns = [
    {
      title: '业务名称',
      dataIndex: 'bizName',
      key: 'bizName',
    }, {
      title: '系统业务编号',
      dataIndex: 'bizCode',
      key: 'bizCode',
    }, {
      title: '主题',
      dataIndex: 'subject',
      key: 'subject',
    }, {
      title: '系统编号',
      dataIndex: 'systemCode',
      key: 'systemCode',
    }, {
      title: '部门',
      dataIndex: 'unit',
      key: 'unit',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '创建人',
      dataIndex: 'createUser',
      key: 'createUser',
    }, {
      title: '操作',
      key: 'operation',
      render: (text, record) => (
        <span className={styles.operation}>
          <Button onClick={e => onEditItem(record.id, e)}>编辑</Button>
          <Button onClick={e => deleteComfim(record.id, e)}>删除</Button>
        </span>
      ),
    },
  ]

  const getBodyWrapperProps = {
    page: location.query.page,
    current: tableProps.pagination.current,
  }

  const getBodyWrapper = (body) => {
    return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body
  }

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
        bordered
        columns={columns}
        size="small"
        rowKey={record => record.id}
        getBodyWrapper={getBodyWrapper}
      />
    </div>
  )
}

ProcessTypeList.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default ProcessTypeList
